<template>
  <el-card shadow="never" class="box-card" style="width: 24%">
    <div slot="header" style="display: flex; justify-content: space-between; align-items: center">
      <span style="display: inline-flex">日程</span>
      <el-button type="text" size="small" icon="el-icon-date" @click="alert('参考商网日程管理页面')" style="display:inline-flex;">更多
      </el-button>
    </div>
    <el-calendar v-model="value" :key="calendarKey">
      <template v-slot:dateCell="{ data }">
        <p :class="{'is-current': isCurrentDate(data.day)}">
          <span v-if="customContent[data.day]">{{ customContent[data.day] }}</span>
          <span v-else>{{ data.day.split('-')[2] }}</span>
        </p>
      </template>
    </el-calendar>
    <el-row>
      <el-col style="margin: 20px auto; width: 50%; text-align: center; font-size: 0.8125rem; color: #5E6D82;">
        <h3 style="margin-bottom: 10px; color: #303133;">
          {{ value | formatMonthDay }} {{ value | getWeekday }}
        </h3>
        <!-- 显示会议列表 -->
        <ul style="list-style: none; padding: 0; margin: 0;">
          <li v-for="(meeting, index) in getMeetings(value)" :key="index" style="line-height: 1.8; color: #606266;">
            {{ meeting }}
          </li>
          <li v-if="!getMeetings(value).length" style="line-height: 1.8; color: #909399;">
            今日无日程事项
          </li>
        </ul>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import moment from "moment";


export default {
  name: "Calendar",
  data(){
    return{
      value: moment().format('YYYY-MM-DD'),
      data: [],
      customContent: {},
      calendarKey: 0,
      meetingListVOS:[],
    }
  },
  filters: {
    // 格式化月日（MM月DD日）
    formatMonthDay(date) {
      return moment(date).format('MM月DD日');
    },
    // 获取星期几
    getWeekday(date) {
      const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      return weekdays[moment(date).day()];
    },
  },
  methods:{
    isCurrentDate(day) {
      const today = new Date();
      const formattedToday = today.toISOString().split('T')[0]; // 格式化为 YYYY-MM-DD
      return day === formattedToday;
    },
    getMeetings(date) {
      const selectedDate = moment(date).format('YYYY-MM-DD');
      const meetingsOnDate = this.meetingListVOS.filter(meeting => {
        const startDate = moment(meeting.startTime).format('YYYY-MM-DD');
        const endDate = moment(meeting.endTime).format('YYYY-MM-DD');
        return selectedDate >= startDate && selectedDate <= endDate;
      });
      return meetingsOnDate.map(meeting => meeting.name);
    },
  },
  mounted() {
    this.$http.get("/meeting/list").then((response) => {
      if (response.data.code == 1) {
        this.meetingListVOS = response.data.data
        this.meetingListVOS.forEach(meetingListVO => {
          const startDate = moment(meetingListVO.startTime).startOf('day');
          const endDate = moment(meetingListVO.endTime).startOf('day');
          const currentDate = startDate.clone();
          while (currentDate.isSameOrBefore(endDate)) {
            const dateStr = currentDate.format('YYYY-MM-DD');
            this.customContent[dateStr] = '会';
            currentDate.add(1, 'day');
          }})
        this.calendarKey += 1;
      } else {
        this.$message({type: "error", message: "发布失败:", showClose: true})
      }
    })
  }
}
</script>

<style scoped>
::v-deep .is-current {
  text-align: center;
}
::v-deep .el-calendar__title{
  font-size: 0.8125rem;
}
::v-deep .el-calendar__header{
padding: 0.75rem 1.25rem !important;
}
::v-deep .el-calendar .el-calendar__body {
  padding: 0 !important;
}

::v-deep .el-calendar .el-calendar__body .el-calendar-table thead th {
  font-size: 0.8125rem !important;
}
::v-deep .el-calendar-table .el-calendar-day{
  height: 3.5rem !important; text-align: center;
}

::v-deep .el-calendar-table .el-calendar-day span{
  font-size: 0.75rem !important;
}

::v-deep .el-calendar .el-calendar__body .el-calendar-table tbody tr td p {
  font-size: 0.8125rem !important;
}

</style>